<template>
  <div class="page_content">
    <template v-if="currentUserType && JSON.stringify(currentUserType) !== '{}'">
      <header>
        <van-nav-bar class="main_header" :title="title" @click-right="clickSetting">
          <template #right>
            <van-icon name="setting-o" size="18" color="#000000" />
          </template>
        </van-nav-bar>
      </header>
      <div class="main_content" style="bottom: 50px;">
        <individual-header ref="individualHeader" />
        <template v-for="item in optMenuList">
          <van-cell v-if="item.isShow" :key="item.code" :title="item.name" is-link @click="handleClickMenu(item)" />
        </template>
      </div>
    </template>
    <template v-else>
      <van-empty description="暂无数据" />
    </template>
  </div>
</template>
<script>
import { getToken } from '@/lib/auth';
import { loginOidc } from '@/lib/oidc_fun';
import { mapState } from 'vuex';
import individualHeader from './individual/header';
import { api_GET_UsersOrganizationUnit } from '@/extend/api/swaggerApi/identity';
export default {
  components: {
    individualHeader
  },
  data() {
    return {
      title: '个人信息',
      optMenuList: [
        {
          code: 'individual',
          name: '个人信息',
          isShow: true
        },
        {
          code: 'team',
          name: '团队中心',
          isShow: true
        },
        {
          code: 'notice',
          name: '消息中心',
          isShow: true
        },
        {
          code: 'entry',
          name: '报项中心',
          isShow: true
        },
        {
          code: 'authentication',
          name: '职业中心',
          isShow: true
        },
        {
          code: 'approve',
          name: '审核中心',
          isShow: true
        },
        {
          code: 'order',
          name: '订单中心',
          isShow: true
        }
      ],
      tokenInfo: getToken()
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType,
      info: state => state.user.info
    })
  },
  watch: {
    currentUserType: {
      handler() {
        this.initMenu();
      }
    }
  },
  created() {
    this.gameId = this.$route.params.id;
    this.tenantId = this.$route.params.id ? this.$route.params.id.split('_')[1] : '';
    this.initMenu();
    // 如果当前页面没有token
    this.tokenInfo = getToken();
    if (!this.tokenInfo) {
      this.goLogin();
    }
  },
  methods: {
    goLogin() {
      let tenantId = this.tenantId ? this.tenantId : '';
      tenantId = tenantId + '___' + ENVIR;
      let href = window.location.href;
      href =
        href.indexOf('#') > -1
          ? href.indexOf('?') > -1
            ? href + '&'
            : href + '?'
          : href + '#/?';
      href = href
        .replace(/loginRandom=[0-9]+|loginRandom=/g, '')
        .replace(/&&+/g, '&')
        .replace('?&', '?');
      href = href + 'loginRandom=' + new Date().getTime();
      // 跳转登录
      loginOidc({
        state: window.btoa(href),
        acr_values: tenantId ? window.btoa(tenantId) : ''
      });
    },
    // 初始化菜单项
    async initMenu() {
      /**
       * 团体信息/审核中心的展示
       * (1) 在后台中没有加入机构 - 新账号（可以创建团体）
       * (2) 在后台中加入了机构且有团体会员管理（EventsManagement.Competitions.MembersManagement）权限
      */
      this.$set(this.optMenuList[1], 'isShow', false);
      this.$set(this.optMenuList[5], 'isShow', false);
      if (this.currentUserType && 'delegationId' in this.currentUserType) {
        const _delegationId = this.currentUserType.delegationId;
        const _info = this.info;
        if (!_delegationId) {
          const currentOrg = await this.getCurrentOrg();
          if (!currentOrg) {
            this.$set(this.optMenuList[1], 'isShow', true);
            this.$set(this.optMenuList[5], 'isShow', true);
          }
        } else if (_delegationId && _info.permissions.includes('EventsManagement.Competitions.MembersManagement')) {
          this.$set(this.optMenuList[1], 'isShow', true);
          this.$set(this.optMenuList[5], 'isShow', true);
        }
      }
    },
    getCurrentOrg() {
      return new Promise((resolve, reject) => {
        api_GET_UsersOrganizationUnit().then(res => {
          resolve(res);
        }, error => {
          reject(error);
        });
      });
    },
    // 设置
    clickSetting() {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/setting`
      });
    },
    handleClickMenu(menuItem) {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/${menuItem.code}`
      });
    }
  }
};
</script>
